* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
}
.container .line {
  display: flex;
  justify-content: space-between;
  margin-top: -1.8518518519vw;
}
.container .line .item {
  width: 11.1111111111vw;
  aspect-ratio: 1;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.4);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  cursor: pointer;
  transition: 0.5s;
}
.container .line .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: 0.5s;
}
.container .line:nth-child(even) {
  transform: translateX(-5.5555555556vw);
}